import React, {
    Component,
} from 'react';

import {
    StyleSheet,
    Text,
    View,
    Platform,
    FlatList,
    Dimensions,
    TouchableOpacity,
    Image,
    ScrollView,
    StatusBar,
    Linking,
    ActivityIndicator,
    DeviceEventEmitter,
    TextInput,
} from 'react-native';

import HttpUtils from "../../utils/HttpUtils";
import HttpUrls from "../../utils/HttpUrls";
import Constant from '../../utils/Constant'//全局变量
import Header from "../../components/header";


const screenW = Dimensions.get('window').width;
const isIos = Platform.OS == 'ios';

let navigation

/**
 * 合同充值
 */
export default class ContractRechargePage extends Component {

    constructor(props) {
        super(props);
        this.state = {
            rechargeList: [],
            checkIndex: 0,
        }
    }




    componentWillMount() {

    }

    componentWillUnmount() {

    }

    componentDidMount() {
        this.getData()
    }

    getData() {
        HttpUtils.postRequest(HttpUrls.getCommonGoodsProdList, { goodsType: 6 })
            .then((result) => {
                if (result.success == true) {
                    this.setState({
                        rechargeList: result.data.resultList
                    })
                }
            })
            .catch((error) => {
                if (this.Loading) {
                    this.Loading.hide();
                }
            });
    }

    contractPay() {

        let obj = this.state.rechargeList[this.state.checkIndex]
        let payData = {
            title: '电子合同套餐',
            money: obj.presentPriceYuan,
            goodsId: obj.goodsId,
            orderType: 20,
            tradeType: 13,
            buyerUserId: Constant.userInfo.userId,
            operator: Constant.userInfo.userId,
            totalAmount: obj.presentPrice,
        }

        navigation.navigate('ConfirmPayPage', {payData: payData})   
    }

    render() {
        navigation = this.props.navigation
        return (
            <View style={styles.container}>

                <Header navigation={navigation} Title={'合同充值'} />

                <View style={styles.rechargeContain}>
                    <View style={styles.titleContain}>
                        <View style={styles.lineStyle}></View>
                        <Text style={styles.titleText}>充值说明</Text>
                    </View>
                    <Text style={styles.rechargeDesText}>使用电子合同可以和您的客户线上完成合同签署，关联车辆信息自动填写准确快捷</Text>

                    <View style={[styles.titleContain, { marginTop: 20 }]}>
                        <View style={styles.lineStyle}></View>
                        <Text style={styles.titleText}>充值套餐</Text>
                    </View>

                    <FlatList
                        style={{}}
                        scrollEnabled={false}
                        data={this.state.rechargeList}
                        renderItem={this.renderItem.bind(this)}
                        keyExtractor={(item, index) => index + ''}
                        numColumns={3}
                        extraData={this.state}>

                    </FlatList>
                </View>

                <View style={{ flex: 1 }}></View>

                <View style={[styles.bottomBox, {height: 50+(Constant.isIPhoneX ? 34:0)}]}>
                    <View
                        style={styles.bottomContain}>

                        <View style={{ flexDirection: 'row', alignItems: 'center', height: '100%' }}>
                            <Text style={{ fontSize: 14, color: '#333333', marginLeft: 15 }}>待支付：</Text>
                            <Text style={{ fontSize: 14, color: '#ED542E', }}>￥</Text>
                            <Text style={{ fontSize: 22, color: '#ED542E', fontWeight: '600', marginBottom: 3 }}>{this.state.rechargeList.length > 0 ? this.state.rechargeList[this.state.checkIndex].presentPriceYuan:''}</Text>
                        </View>

                        <TouchableOpacity
                            style={styles.payBtnContain}
                            onPress={() => {
                                this.contractPay()
                            }}>
                            <Text style={{ fontSize: 14, fontWeight: 'bold', color: '#333333' }}>立即支付</Text>
                        </TouchableOpacity>
                    </View>

                </View>

            </View>
        );
    }

    renderItem({ item, index }) {
        return (
            <TouchableOpacity
                style={this.state.checkIndex == index ? styles.itemCheckContain : styles.itemNormalContain}
                onPress={() => {
                    this.setState({
                        checkIndex: index
                    })
                }}>
                <View style={{ alignItems: 'center' }}>
                    <View style={styles.priceContain}>
                        <Text style={styles.priceTagText}>￥</Text>
                        <Text style={styles.priceText}>{item.presentPriceYuan}</Text>
                    </View>
                    <Text style={styles.numText}>{item.goodsName}</Text>
                </View>
                {this.state.checkIndex == index ? <Image style={styles.checkImg} source={require('source/image/bottom_right_check.png')}></Image> : null}

            </TouchableOpacity>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        width: screenW,
        height: '100%',
        flexDirection: 'column',
        backgroundColor: '#F9F9F9'

    },
    rechargeContain: {
        marginLeft: 16,
        marginRight: 16,
        marginTop: 12,
        borderRadius: 12,
        backgroundColor: 'white',
        paddingLeft: 12,
        paddingRight: 12,
        paddingTop: 20,
        paddingBottom: 20
    },
    lineStyle: {
        width: 2,
        height: 16,
        backgroundColor: '#FEDD35',

    },
    titleContain: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    titleText: {
        fontSize: 16,
        color: '#222222',
        marginLeft: 10,
        fontWeight: '500'
    },
    rechargeDesText: {
        fontSize: 14,
        color: '#333333',
        marginTop: 8,
        lineHeight: 22
    },

    itemNormalContain: {
        borderColor: '#E5E5E5',
        borderWidth: 1,
        borderRadius: 4,
        height: 70,
        flex: 1,
        marginTop: 20,
        marginRight: 8,
        justifyContent: 'center',
        alignItems: 'center'
    },
    itemCheckContain: {
        borderColor: '#FFDE00',
        borderWidth: 1,
        borderRadius: 4,
        height: 70,
        flex: 1,
        marginTop: 20,
        marginRight: 8,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(255,222,0,0.1)'
    },
    priceContain: {
        flexDirection: 'row',
        alignItems: 'center',

    },
    priceTagText: {
        fontSize: 14,
        color: '#999999',

    },
    priceText: {
        fontSize: 20,
        color: '#333333',
        fontWeight: 'bold'
    },
    numText: {
        fontSize: 12,
        color: '#666666',
        marginTop: 8
    },
    checkImg: {
        width: 20,
        height: 20,
        position: 'absolute',
        right: 0,
        bottom: 0
    },
    bottomBox: {
        height: 50,
        width: '100%',
        backgroundColor: '#fff',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'flex-start'
    },
    bottomContain: {
        height: 50,
        width: '100%',
        backgroundColor: '#fff',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    payBtnContain: {
        width: 100,
        height: '100%',
        backgroundColor: '#FCDD12',
        justifyContent: 'center',
        alignItems: 'center'
    }

})